<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
            <div class="header">
                <span class="title">选择套餐</span>
                <a-button type="primary" size="small" @click="goToBasrSettingMagage" class="bt" >套餐管理</a-button>
                <span style="margin-left:10px;">已选套餐：{{baseSettingInfo.name || "未选择"}}</span>
            </div>
        </div>
        <nly-content>
            <div class="box-content">
                <div class="box" v-for="(item,i) in baseSettingList" :key="item.id">
                    <div class="name">
                        <p>{{item.name}}</p>
                    </div>
                    <div class="descriptions">
                        <div class="box-row">
                            <div class="left">月低费</div>
                            <div class="right">{{item.baseCharges}}元/月</div>
                        </div>
                        <div class="box-row">
                            <div class="left">固定分钟数</div>
                            <div class="right">{{item.baseMinutes}}分钟</div>
                        </div>
                        <div class="box-row">
                            <div class="left">超出分钟费率</div>
                            <div class="right">{{item.price}}元/分钟</div>
                        </div>
                    </div>
                    <a-button type="primary" @click="checkBaseSettingInfo(item)" class="bt-select" v-if="item.id !=baseSettingInfo.baseSettingId">选择</a-button>
                </div>
            </div>
        </nly-content>  
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import { getByCompany} from "@/api/crm/call/callBaseSettingInfo";
import { pageCrmCallBaseSetting , saveBaseSettingOrder} from "@/api/crm/call/callBaseSetting";

export default {
    data () {
        return {
            baseSettingList: [],    //套餐集合
            baseSettingInfo: {},    //租户套餐信息
        };
    },
    created(){
    },
    mounted(){
    },
    activated(){
        this.reLoadData();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    watch: {
    },
    methods: {
        goToBasrSettingMagage(){
                this.$router.push("/crm/call/baseSetting");
        },
        reLoadData(){
            this.getByCompany();
            this.pageList();
        },
        //获取当前租户套餐信息
        getByCompany(){
            getByCompany().then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    if(data){
                        this.baseSettingInfo = data;
                    }
                }
            }).catch(error => { });
        },
        //获取外呼套餐集合
        pageList () {
            let postData ={
                page:{
                   size: -1     
                },
                starus:1
            }
            pageCrmCallBaseSetting(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    if(data){
                        this.baseSettingList = records;
                    }
                }
            }).catch(error => { });
        },
        checkBaseSettingInfo(record){
            let baseSettingId = record.id;
            let name = record.name;
            let { baseSettingInfo } = this;
            let _this = this;
            if(baseSettingId == baseSettingInfo.baseSettingId){
                this.$message.warn("选择的套餐和当前套餐相同！！");
                return;
            }
            if(baseSettingInfo.id){
                this.$confirm({
                        title: '提示',
                        okText: "确认变更",
                        content: <span>你确定变更套餐“{baseSettingInfo.name}”到“{name}”?</span>,
                        onOk(){
                             _this.saveBaseSettingOrder(baseSettingId);
                        },
                        onCancel () { },
                    });
            }else{
                this.$confirm({
                        title: '提示',
                        okText: "确认",
                        content: <span>你确定选择套餐“{name}”?</span>,
                        onOk(){
                             _this.saveBaseSettingOrder(baseSettingId);
                        },
                        onCancel () { 
                            _this.reLoadData();
                        },
                    });
            }

        },
        //新购/变更套餐
        saveBaseSettingOrder(baseSettingId){
            let _this = this;
            saveBaseSettingOrder({baseSettingId}).then(response => {
                if (response.code === 200) {
                    this.$confirm({
                        title: '提示',
                        okText: "订单管理",
                        content: <span>提交成功,你可以到订单里查询订单详情</span>,
                        onOk(){
                            _this.$router.push("/views/call/orderManage")
                        },
                        onCancel () { },
                    });
                }
            }).catch(error => { });
        }
    }
};
</script>
<style lang="less" scoped>
    .box-content{
        padding: 10px 50px;
        display: flex;
        flex-wrap: wrap;
        background-color: #ececec;
        .box{
            width: 250px;
            height: 300px;
            display: flex;
            flex-direction: column;
            margin: 20px;
            background: #fff;
            .name{
                width: 100%;
                height: 98px;
                line-height: 98px;
                text-align: center;
                background: url('~@/assets/base_setting_back.png') no-repeat; 
                font-size: 24px;
                font-weight:700;
                color: white;
                border-radius: 5px 5px 0px 0px;
            }
            .descriptions{
                flex: 1;
                .box-row{
                    display: flex;
                    margin: 20px;
                    .left{
                        width: 120px;
                    }
                    .right{
                        flex: 1;
                    }
                }
                .bt-select{
                    margin-bottom: 10px;
                }
            }
        }
    }
    
    // 头部
    .header{
        padding: 15px 20px;
        .title{
            font-weight: 700;
            font-size: 20px;
        }
        .bt{
            margin-left: 10px;
        }
    }

</style>